<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../js/localstorage.js"></script>
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/highcharts.js" ></script>
		<script type="text/javascript" src="../js/highcharts-more.js" ></script>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<script src="http://api.map.baidu.com/api?v=2.0&ak=A1LU7iHS0avqQwPLAxbhKn0UYSQCuRVH"></script>
		<link rel="stylesheet" type="text/css" href="../css/zTreeStyle.css">
		<script type="text/javascript" src="../js/jquery.ztree.core.js"></script>
		<style type="text/css">
			body,
			html,
			#allmap {
				width: 100%;
				height: 100%;
				overflow: hidden;
				margin: 0;
				font-family: "微软雅黑";
				margin: 0;
				padding: 0;
			}
			.tab1{
				clear: both;
				margin: auto;
				text-align: center;
			width: 100%; height: 40%;margin: 0 auto;

		}
			/*body {
				margin: 0;
				padding: 0;
			}*/
			
			.d1,
			.d2,
			.d3,
			.d4 {
				width: 178px;
				height: 22px;
				bottom: 11.5%;
				text-align: center;
				position: absolute;
				transition: height 1s;
				cursor: pointer;
			}
			
			.dd1,
			.dd2,
			.dd3,
			.dd4 {
				font-size: 18px;
				width: 178px;
				height: 22px;
				bottom: 7.5%;
				text-align: center;
				position: absolute;
			
			}
			.s1,.s2,.s3,.s4{
				position: absolute;
				left: 30%;
				bottom: 5%;
				font-size: 55px;
				color:	#383838;
			}
			
			
			
			.d1 {
				left: 6.7%;
				height: 300px;
				background: #7cb5ec;
			}
			
			.d2 {
				left: 26.7%;
				height: 220px;
				background: #8085e9;
			}
			
			.d3 {
				left: 45.7%;
				height: 190px;
				background: #90ed7d;
			}
			
			.d4 {
				left: 64.7%;
				height: 320px;
				background: #f7a35c;
			}
			
			.dd1 {
				left: 6.7%;
				
		
			}
			
			.dd2 {
				left: 26.7%;
				
			
			}
			
			.dd3 {
				left: 45.7%;
			
		
			}
			
			.dd4 {
				left: 64.7%;
			
			
			}
			
			span {
				color: #000;
				;
			}
			#right{
				border-left: 2px  solid #CCCCCC;
				float: right;
				width: 18%;
				height: 100%;
				
			}
		</style>
	</head>

	<body>
		<script type="text/javascript">
			// tree节点点击事件  name为这个节点的值
			function zTreeOnClick(event, treeId, treeNode) {
				$("#site").val(treeNode.name);
			};
			$("div").click(function(e) {
				$("#tree").slideUp(300);
				return false;
			})
			var setting = {
				callback: {
					onClick: zTreeOnClick
				}
			};
			var zNodes = [{
				name: "香港",
				open: true,
				children: [{
						name: "九龙区",
						open: true,
						children: [
							{ name: "场所A" },
							{ name: "场所B" },
							{ name: "场所C" }
						]
					},
					{
						name: "旺角区",
						open: true,
						children: [
							{ name: "场所A" },
							{ name: "场所B" },
							{ name: "场所C" }
						]
					},
					{
						name: "西贡区",
						open: true,
						children: [
							{ name: "场所A" },
							{ name: "场所B" },
							{ name: "场所C" }
						]
					},
					{
						name: "油尖旺区",
						open: true,
						children: [
							{ name: "场所A" },
							{ name: "场所B" },
							{ name: "场所C" }
						]
					},
					{
						name: "深水埗区",
						open: true,
						children: [
							{ name: "场所A" },
							{ name: "场所B" },
							{ name: "场所C" }
						]
					}
				]
			}];
			$(function() {
				// $("#details").css("width",$("html").width()-250+"px")
				// $(".listFilter").css("width",$("html").width()-200+"px")
				// $(".reportResults").css("width",$("html").width()-200+"px")
				// $("#tree").css("min-height",$("html").height()-150+"px")
				$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			})

			function add() {
				$(".k-overlay,.content").css("display", "flex");
			}

			function save() {
				zNodes[0].children[0].children.push({ name: "场所" + Math.floor(Math.random() * 100), open: true });
				$.fn.zTree.init($("#treeDemo"), setting, zNodes);
				$(".k-overlay,.content").css("display", "flex");
			}
		</script>
		<script type="text/javascript">
			$(function() {

				$("#qhbtn").click(function() {
					alert(1)
				})

				$("#site").click(function(e) {
					$("#tree").slideDown(300);
				})

				// $("#site").blur(function(e){
				// 	$("#tree").slideUp(300);
				// })
				$("#tree").hover(function() {}, function() {
					$("#tree").slideUp(300);
					// $("#site").blur();
				})
			})
		</script>
		<div style="z-index: 3;position: absolute;top: 5%;right: 1%; width: 200px;text-align: center;">
			<button id="site" style="background: #03a9f4;color: #fff;">
				<script>document.write(language.choiceSite)</script>
			</button>
			<div id="tree" style="display: none;background: #fff;">
				<!-- <button style="float: right;" onclick="add()">增加</button> -->
				<ul id="treeDemo" class="ztree"></ul>
			</div>
		</div>

		<div class="page-header" style="margin-bottom: 0;">
			<h2><script>document.write(language.kongzhi)</script></h2>
		</div>
		<!--<div id="container" style="width: 80%; height: 800px; margin: 0 auto"></div>-->
		<div id="box">
			<div class="d1"><span class="s1">30</span></div>
			<div class="d2"><span class="s2">22</span></div>
			<div class="d3"><span class="s3">19</span></div>
			<div class="d4"><span class="s4">32</span></div>
			
			
			<div class="dd1"><script>document.write(language.Current_visitors)</script></div>
			<div class="dd2"><script>document.write(language.Current_online_contractors)</script></div>
			<div class="dd3"><script>document.write(language.Current_projects_under_construction)</script></div>
			<div class="dd4"><script>document.write(language.Current_borrowed_goods)</script></div>
		</div>
		<div id="right">
			<div id="tab1" class='tab1'></div>
			<div id="tab2" class='tab1'></div>
		</div>
		<script language="JavaScript">
			$(document).ready(function() {
				setInterval(function() {
					var x = Math.floor(Math.random() * 250 + 100);
					var x0 = Math.floor(Math.random() * 250 + 100);
					var x1 = Math.floor(Math.random() * 250 + 100);
					var x2 = Math.floor(Math.random() * 250 + 100);
					$('.s1').text(parseInt(x * 0.1));
					$('.s2').text(parseInt(x0 * 0.1));
					$('.s3').text(parseInt(x1 * 0.1));
					$('.s4').text(parseInt(x2 * 0.1));
					$(".d1").height(x);
					$(".d2").height(x0);
					$(".d3").height(x1);
					$(".d4").height(x2);
				}, 3000);

				function tab(tabData, name, unit = '',num,a) {
					var chart = {
						type: 'gauge',
						plotBackgroundColor: null,
						plotBackgroundImage: null,
						plotBorderWidth: 0,
						plotShadow: false
					};
					var title = {
						text: name
					};
					var credits = {
						enabled: false
					};
					var pane = {
						startAngle: -150,
						endAngle: 150,
						background: [{
							backgroundColor: {
								linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
								stops: [
									[0, '#FFF'],
									[1, '#333']
								]
							},
							borderWidth: 0,
							outerRadius: '109%'
						}, {
							backgroundColor: {
								linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
								stops: [
									[0, '#333'],
									[1, '#FFF']
								]
							},
							borderWidth: 1,
							outerRadius: '107%'
						}, {
							// default background
						}, {
							backgroundColor: '#DDD',
							borderWidth: 0,
							outerRadius: '105%',
							innerRadius: '103%'
						}]
					};

					// the value axis
					var yAxis = {
						min: 0,
						max: num,

						minorTickInterval: 'auto',
						minorTickWidth: 1,
						minorTickLength: 10,
						minorTickPosition: 'inside',
						minorTickColor: '#666',

						tickPixelInterval: 30,
						tickWidth: 2,
						tickPosition: 'inside',
						tickLength: 10,
						tickColor: '#666',
						labels: {
							step: 2,
							rotation: 'auto'
						},
						title: {
							text: unit
						},
						plotBands: a
					};

					var series = [{
						name: 'Speed',
						data: [80],
						tooltip: {
							valueSuffix: unit
						}
					}];

					var json = {};
					json.chart = chart;
					json.title = title;
					json.credits = credits;
					json.pane = pane;
					json.yAxis = yAxis;
					json.series = series;

					// Add some life
					var chartFunction = function(chart) {
						if(!chart.renderer.forExport) {
							setInterval(function() {
								var point = chart.series[0].points[0],
									newVal, inc = Math.round((Math.random() - 0.5) * 20);
								newVal = point.y + inc;
								if(newVal < 0 || newVal > num) {
									newVal = point.y - inc;
								}
								point.update(newVal);
							}, 3000);
						}
					};
					 //alert(tabData);
					$(tabData).highcharts(json, chartFunction);
				}
				
				var tab1='#tab1';
				var tab2='#tab2';
				var a =  [{
							from: 0,
							to: 120,
							color: '#55BF3B' // green
						}, {
							from: 120,
							to: 160,
							color: '#DDDF0D' // yellow
						}, {
							from: 160,
							to: 300,
							color: '#DF5353' // red
						}];
				var b =  [{
							from: 0,
							to: 30,
							color: '#55BF3B' // green
						}, {
							from: 30,
							to: 60,
							color: '#DDDF0D' // yellow
						}, {
							from: 60,
							to: 100,
							color: '#DF5353' // red
						}];
				var unit='';
				tab(tab1, language.Guest, unit,300,a);
				tab(tab2, language.kongzhi_cheng, unit,100,b);

			});

			$('.d1').click(function() {
				window.location = 'kongzhi_yiban.html';
			})
			$('.d4').click(function() {
				window.location = 'kongzhi_jie.html';
			})
			$('.d3').click(function() {
				window.location = 'kongzhi_gongcheng.html';
			})
			$('.d2').click(function() {
				window.location = 'kongzhi_cheng.html';
			})
		</script>

	</body>

</html>